<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       .one{
           background-color: red;
           width: 300px;
           height: 50px;
           /*水平居中*/
           text-align: right;
           /*行高,垂直居中*/
           line-height: 100px;
           /*1) 定义光标的类型:pointer手指*/
           cursor: wait;
           /*2) visibility和display区别:
           1 visibility会保留尺寸
           2 display不会保留尺寸
           */
           /*visibility: hidden;*/
           /*display: none;*/
           font-family: "arial";

       }
        a{
            text-decoration: none;
        }

        div p{
           background-color: yellow;
           width: 180px;
            /*用于首行缩进*/
           text-indent: 2%;
        }

        .two{
            background-color: red;
        }

        ul{
          /*设置列表左边的样式*/
          list-style: none;
          background: url("img/7.jpg");
        }

        ul li{
           font-size: 18px;
        }

        .three{
            background: red;
            width: 200px;
            height: 40px;
            /*截取超出父标签的内容*/
            overflow: hidden;
        }
        div{
            background: red;
            width: 200px;
            height: 120px;
            padding: 30px;
            border:20px double yellow;

            /*设置圆角*/
            /*border-radius:30px;*/
             /*border-bottom-left-radius: 130px;*/
            /*border-bottom-right-radius: 130px;*/
            /*border-top-left-radius: 130px;*/
            border-top-right-radius: 130px;

            /*上右下左*/
            margin: 10px 5px 6px 7px;
            /*上 左右 下*/
            margin: 10px 6px 7px;
            /* 上下  左右*/
            margin: 10px 7px;
            /*上下左右都为10px*/
            margin: 10px;

        }
    </style>
</head>
<body>
   <div class="one">12212121211212</div>
   <span>12306</span>
   <a href="#">百度一下</a>
   <div class="two">-->
       <p>接触到记不得是常见病的坚持把对方或拒付</p>
       <!--<p>接触到记不得是常见病的坚持把对方或拒付</p>-->
       <!--<p>接触到记不得是常见病的坚持把对方或拒付</p>-->
   </div>
   <ul>
       <li>11111</li>
       <!--<li>22222</li>-->
       <!--<li>33333</li>-->
   </ul>
     <!--
      水平居中:
      1.行内标签 行内-块级标签   text-align: center;
      2.块级标签  margin: 0px auto;
      垂直居中:
      直接设置 line-height的高度为height的高度
    -->
   <div class="three">
       dewdewdewedewdewde我的很长长长长wewdew
   </div>
</body>
</html>